<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>课程预订</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    
   
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <style type="text/css">    
        input::-webkit-input-placeholder{
            color:#cccccc;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;    
            margin: 0;
        }
    </style>
    <script type='text/javascript'>
      (function($) {
        $.fn.ajaxSubmit = function(options) {
          var form = this;
          
          var formAction = form.attr('action');
          var formMethod = form.attr('method');
          if(formMethod == null ||
              !/^(POST|GET)$/i.test(formMethod.trim())){
            formMethod = "GET";
          }
          var params = new Object();
          
          /*组合参数*/        
          var items = form.find("input[type=hidden],"+
                      "input[type=text],"+
                      "input[type=number],"+
                      "input[type=password],"+
                      "textarea,"+
                      "select,"+
                      "input[type=radio]:checked,"+
                      "input[type=checkbox]:checked");
          
          items.each(function(index){
            params[this.name] = this.value;
          });
          /**/
          
          var dataType = options.dataType;
          if(dataType == null)
            dataType = 'json';
          
          var success = options.success;
          if(success == null){
            success = function(){
            };
          }
          
          $.ajax({
            type: formMethod,
            url: formAction,
            data: params,
            dataType: dataType,
            success: success
          });
        };
      })(Zepto);

        $(function () {
            $.config = {
                router: false
              }
            $.init();

            var ordertime=60   //设置再次发送验证码等待时间
            var timeleft=ordertime
            var btn=$("#yzm")
            var phone=$("#mobile")
            var reg =  /^1\d{10}$/  //电话号码的正则匹配式
            //console.log(phone);

            phone.keyup(function(){
              if (reg.test(phone.val())){
                btn.removeAttr("disabled");  //当号码符合规则后发送验证码按钮可点击
                btn.removeClass('disabled');
                }
              else{
                btn.attr("disabled",true);
                btn.addClass('disabled');
              }
            })

            //计时函数
            function timeCount(){
               timeleft-=1
               if (timeleft>0){
                 btn.val(timeleft+" 秒后重发");
                 setTimeout(timeCount,1000)
               }else {
                  btn.val("重新发送");
                  timeleft=ordertime   //重置等待时间
                  btn.removeAttr("disabled");
                  btn.removeClass('disabled');
               }
             }

            //事件处理函数
            btn.on("click",function(){
                $(this).attr("disabled",true); //防止多次点击
                btn.addClass('disabled');
                mobile = $('#mobile').val();
                $.ajax({
                  type:"get",
                  url:"{:U('Mobileauth/sendAuth')}",
                  data:{'mobile':mobile},
                  success:function(data){
                    if (data ==1 ) {
                      $.toast("发送成功");
                      timeCount(this);    
                    }else{
                      $.toast(data);
                    }
                  },
                });
            })

          })

        

        function decnum() {
            num = parseInt($('#buynum').val());
            num = num-1;
            if (num>0) {
                $('#buynum').val(num);
                calcmoney();
            }
        }

        function addnum() {

            num = parseInt($('#buynum').val());
            num = num+1;
            $('#buynum').val(num);
            calcmoney();
        }    


        function calcmoney() {
            num = parseInt($('#buynum').val());
            if (isNaN(num)) {
              return false;
            }
            //console.log(num);
            time = $('#jointime').val();
            iid = {$info.id};
            total = parseInt({$info.num});
            price = {$info.price};
            
            $.ajax({
              type:"get",
              url:"{:U('getInvnum')}",
              data:{'time':time,'id':iid},
              success:function(data){
                if ((num+parseInt(data))>total) {
                    //console.log(data);
                    nowtxt = $("#jointime option").eq($("#jointime").attr("selectedIndex")).text().substr(0,11);
                    $("#jointime option").eq($("#jointime").attr("selectedIndex")).text(nowtxt+'(剩余名额'+(total-parseInt(data))+')');
                    $.toast("剩余名额不足，请减少购买数量或选择其他场次");
                    
                    //alert($("#jointime option").eq($("#jointime").attr("selectedIndex")).text());

                    $('#buynum').val(total-parseInt(data));
                }
                num = parseInt($('#buynum').val());
                total = num*parseInt(price);
                //total = 0;
                $('#total').html(total);
                
              },
            });
        }

        function checkform() {
            if ($.trim($("#name").val()).length == 0) {
                
                $.toast("请输入姓名");
                
                return false;
            }

            if ($.trim($("#mobile").val()).length == 0) {
                $.toast("请输入手机号");
                return false;
            }

            if ($.trim($("#authcode").val()).length == 0) {
                $.toast("请输入验证码");
                return false;
            }

            if ($.trim($("#jointime").val()).length == 0) {
                $.toast("请选择参与场次");
                return false;
            }


            var re = /^1\d{10}$/
            if (re.test($("#mobile").val())) {
                form1.submit();
            }else{
                $.toast("请正确输入手机号");
            }
            return false;
        }




    //调用微信JS api 支付
    function jsApiCall(params)
    {
        WeixinJSBridge.invoke(
            params,
            function(res){
                WeixinJSBridge.log(res.err_msg);
                alert(res.err_code+res.err_desc+res.err_msg);
            }
        );
    }

    function callpay(params)
    {
        if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
        }else{
            jsApiCall(params);
        }
    }
   
    
 
    </script>
</head>


<body>
  <div class="page page-current" id='router'>
    <div class="card" style="margin:0;box-shadow:none;">
    
        <div class="card-content">
          
          <div class="list-block media-list">
            <ul>
              <li style="padding-top: .75rem;padding-left: 1rem;" class="item-content">
                <div class="item-media">
                  <img src="__HOME_IMG__/default/ticket.png">
                </div>
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title"><font size="4em">课程【{$info.title}】预订</font></div>
                  </div>
                  <div class="item-subtitle"><font color="gray" size="1.5em">{$info.address}</font></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        
    </div>       
      <form action="{:U('saveInvite')}" method="post" name="form1" id="form1">
        <input type="hidden" name="inviteid" value="{$info.id}">
        <input type="hidden" name="ch" value="{$ch}">
      <div class="card" style="margin:0.5rem 0 0 0;box-shadow:none;">
        <div class="list-block">
            <ul>
              <!-- Text inputs -->
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-form-email"></i></div>
                  <div class="item-inner">
                    <div class="item-title label">姓&#12288;名 <font color="red">*</font></div>
                    <div class="item-input">
                      <input type="text" name="name" id="name"  placeholder="请输入姓名">
                    </div>
                  </div>
                </div>
              </li>
              
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-form-email"></i></div>
                  <div class="item-inner">
                    <div class="item-title label">手机号 <font color="red">*</font></div>
                    <div class="item-input">
                      <input type="text" name="mobile" id="mobile" placeholder="请输入手机号">
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-form-email"></i></div>
                  <div class="item-inner col-75">
                    <div class="item-title label">验证码 <font color="red">*</font></div>
                    <div class="item-input">
                      <input type="text" name="authcode" id="authcode"  placeholder="验证码">
                    </div>
                    <input type="button" value="获取验证码" name="yzm" id="yzm" class="button disabled" disabled="disabled">
                    
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-form-gender"></i></div>
                  <div class="item-inner">
                    <div class="item-title label">参与场次 <font color="red">*</font></div>
                    <div class="item-input">
                      <select name="jointime" id="jointime">
                        <option value=''>点击选择</option>
                        <volist name="i_time" id="vo">
                          <if condition="$vo gt $timestamp ">
                            <if condition="$joindata[$vo] lt $info['num'] ">
                              <option value="{$vo}">{$vo|time_format='Y-m-d'} ( 剩余名额{$info['num']-$joindata[$vo]} )</option>
                            <else/>
                              <optgroup label="{$vo|time_format='Y-m-d'} (已报满)"></optgroup>
                            </if>
                          </if>
                        </volist>
                        
                      </select>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-form-gender"></i></div>
                  <div class="item-inner">
                    <div class="item-title label" style="margin-bottom: 2.7rem;">预订人数 <font color="red">*</font></div>
                    <div class="item-input">
                      <p><a href="#" onclick="javascript:decnum();" class="button button-light" style="font-size: 1.4rem;line-height:1.7rem;height:2rem;width:2rem;float:left;margin:0 0.5rem 0.5rem 0">-</a>
                        <!--
                      <input name="joinnum" type="number" id="buynum" onkeyup="javascript:calcmoney();" style="border-radius:0.25rem;text-align:center;height:2rem;width:5rem;box-sizing: border-box;border:1px solid #c8cccf;color:#6a6f77;float:left" value="1" placeholder="">
                    -->
                    <input name="joinnum" type="number" id="buynum" style="border-radius:0.25rem;text-align:center;height:2rem;width:5rem;box-sizing: border-box;border:1px solid #c8cccf;color:#6a6f77;float:left" value="1" placeholder="">
                      <a href="#" onclick="javascript:addnum();" class="button button-light" style="font-size: 1.4rem;line-height:1.6rem;height:2rem;width:2rem;float:left;margin-left:0.5rem">+</a>
                      <!--
                      <a style="color: #333;line-height:2rem;height:2rem;width:10rem;float:left;margin:0 0.5rem 0.5rem -.5rem">&#12288;合计:&#12288;<span style="color: red;">¥ </span><i id="total" style="font-size: 1.5rem;color: red;font-style: normal;">{$info.price}</i></a>
                    --></p>
                    </div>
                  </div>
                </div>
              </li>
              <li style="height:1.5rem">
                </li>
            </ul>
          </div>
          <div class="content-block">
            <div class="row">
              <div class="col-100"><a href="#" onclick="javascript:checkform();" class="button button-big button-fill button-success" style="background-color: #c4863d;">立即预约</a></div>
            </div>
          </div>
          <div class="content-block">
            &nbsp;&nbsp;
          </div>
      </div>
        </form>
</div>
</body>

</html>
